<template>
  <el-dialog
    :title="$t('customer.operationLog')"
    :visible.sync="dialogVisible"
    :show="show"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="open"
  >
    <el-scrollbar
      ref="myScrollbar"
      :wrap-class="{ wrapClass: true }"
      class="form-scrollbar scrollbar-back-top"
    >
      <Log :id="id" v-if="dialogVisible" />
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import Log from '@/views/customer/common/log'

export default {
  name: 'DialogLog',
  components: { Log },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: '',
    },
    closeAction: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: this.show,
    }
  },
  methods: {
    open() {
      this.$nextTick(() => {
        this.$refs['myScrollbar'].scrollTop = 0
      })
    },
    handleClose(done) {
      this.$emit('update:show', false)
      this.$emit('closeAction')
    },
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
}
</script>

<style scoped>
.form-scrollbar {
  height: calc(100vh - 350px);
}
</style>
